<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">  
    <title>自定义Toast，类似于android的Toast</title> 
    <style>
        body{
            font-family: "Lucida Bright","Helvetica", sans-serif;
        }
        button{
            text-decoration:none;
            background:#2f435e;
            color:#f2f2f2;

            padding: 10px 30px 10px 30px;
            font-size:16px;
            font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
            font-weight:bold;
            border-radius:3px;

            -webkit-transition:all linear 0.30s;
            -moz-transition:all linear 0.30s;
            transition:all linear 0.30s;
        }
    </style>
    <script>
        //自定义弹框  
        function Toast(msg, duration) {
            duration = isNaN(duration) ? 3000 : duration;
            var m = document.createElement('div');
            m.innerHTML = msg;
            m.style.cssText = "width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:40%; left:20%; z-index:999999; font-weight:bold;";
            document.body.appendChild(m);
            setTimeout(function () {
                var d = 0.5;
                m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
                m.style.opacity = '0';
                setTimeout(function () {
                    document.body.removeChild(m)
                }, d * 1000);
            }, duration);
        }
    </script>
       
</head>
  
<body>  
<button onclick="Toast('您点击了弹框按钮！',2000);">Toast</button>

</body>
  
</html>
